<script setup lang="ts">
import {useRouter} from "vue-router";
import {ref} from "vue"
import routes from "../config/route.ts";
const router = useRouter()
// import { ref } from 'vue';
const onClickLeft = () => {
  router.back()
};
const onClickRight = () => {
  router.push("/search")
};

const DEFAULT_TITLE = '伙伴匹配';
const title = ref(DEFAULT_TITLE);
/**
 * 根据路由切换标题
 */
router.beforeEach((to) => {
  const toPath = to.path;
  const route = routes.find((route) => {
    return toPath == route.path;
  })
  title.value = route?.title ?? DEFAULT_TITLE;
})
</script>

<template>
  <van-nav-bar
      :title="title"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>

  <div id="content">
    <router-view />
  </div>

  <van-tabbar route>
    <van-tabbar-item to="/" name="index" icon="home-o">主页</van-tabbar-item>
    <van-tabbar-item to="/team"  name="team" icon="friends-o">队伍</van-tabbar-item>
    <van-tabbar-item to="/setting" name="setting" icon="user-o">个人</van-tabbar-item>
  </van-tabbar>
</template>

<style scoped>
#content{
  padding-bottom: 50px;
}
</style>